<script setup>
import titlelogo from '@/assets/img/titlebg/titlebg1.webp'
import img1 from '@/assets/img/achievement/goal1.webp'
import img2 from '@/assets/img/achievement/goal2.webp'
import img3 from '@/assets/img/achievement/goal3.webp'
import img4 from '@/assets/img/achievement/goal4.webp'
import img5 from '@/assets/img/achievement/goal5.webp'
import img6 from '@/assets/img/achievement/goal6.webp'
</script>
<template>
  <section class="achievement section bg-color">
    <el-container class="container">
      <el-header>
        <el-image :src="titlelogo" class="titlelogo" />
        <h2 class="title">学员成果</h2>
        <div class="subtitle">
          通过编程帮助孩子创作个性化作品，让孩子获得满足感和成就感
        </div>
      </el-header>

      <main class="achievement-main">
        <el-card>
          <el-image :src="img1" class="img" />
          <el-footer class="piece-info">
            <div class="piece-title">
              <span>小明的飞行梦</span>
            </div>

            <div class="piece-author">
              <span>作者：黄某某</span>
            </div>
          </el-footer>
        </el-card>

        <el-card>
          <el-image :src="img2" class="img" />
          <el-footer class="piece-info">
            <div class="piece-title">
              <span>会动的故事书</span>
            </div>

            <div class="piece-author">
              <span>作者：李某某</span>
            </div>
          </el-footer>
        </el-card>

        <el-card>
          <el-image :src="img3" class="img" />
          <el-footer class="piece-info">
            <div class="piece-title">
              <span>玩游戏的小朋友</span>
            </div>

            <div class="piece-author">
              <span>作者：彭某某</span>
            </div>
          </el-footer>
        </el-card>

        <el-card>
          <el-image :src="img4" class="img" />
          <el-footer class="piece-info">
            <div class="piece-title">
              <span>放风筝</span>
            </div>

            <div class="piece-author">
              <span>作者：吴某某</span>
            </div>
          </el-footer>
        </el-card>

        <el-card>
          <el-image :src="img5" class="img" />
          <el-footer class="piece-info">
            <div class="piece-title">
              <span>彩色的机器人</span>
            </div>

            <div class="piece-author">
              <span>作者：陈某某</span>
            </div>
          </el-footer>
        </el-card>

        <el-card>
          <el-image :src="img6" class="img" />
          <el-footer class="piece-info">
            <div class="piece-title">
              <span>怪兽机器人</span>
            </div>

            <div class="piece-author">
              <span>作者：李某某</span>
            </div>
          </el-footer>
        </el-card>
      </main>
    </el-container>
  </section>
</template>
<style lang="scss" scoped>
.achievement-main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  padding: 0;
  overflow: hidden;
}

.el-card {
  height: 340px;
  :deep() {
    .el-card__body {
      padding: 0;
    }

    .piece-title {
      font-size: 1.2rem;
      color: #ffc001;
      margin: 0.4rem 0;
    }

    .piece-author {
      font-size: 0.875rem;
      color: rgb(102, 102, 102);
    }

    .img {
      width: 100%;
    }
  }
}
</style>
